<template>
  <div>
    <div class="root-container">
      <div class="graphic-container" :style="{ width: containerWidth + 'px' }">
        <div
          :style="{
            width: graphicScale + 'px',
            height: graphicScale + 'px',
          }"
        >
          <GraphicView />
        </div>
      </div>
      <div class="config-container">
        <el-scrollbar :height="containerHeight + 'px'">
          <ListView />
        </el-scrollbar>
      </div>
    </div>
    <!-- <pre>{{ graphicScale }}</pre> -->
    <!-- <pre>{{ status }}</pre> -->
    <AlertView v-if="showAlert" />
  </div>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";

import GraphicView from "./graphic.vue";
import ListView from "./list.vue";
import AlertView from "@/components/Alert/index.vue";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

// const status = computed(() => seatStore.seatStatusACC);

const showAlert = computed(
  () =>
    !seatStore.isServiceAvailable &&
    dayjs().diff(seatStore.seatStatusTWRVersion, "minute") > 30
);

const containerWidth = computed(
  () =>
    commonStore.clientWidth -
    (commonStore.showSidebar ? commonStore.sidebarWidth : 0) -
    350
);

const containerHeight = computed(() => commonStore.clientHeight - 120);

const graphicScale = computed(() =>
  Math.min(containerWidth.value, containerHeight.value)
);
</script>

<style scoped>
.root-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  padding-top: 24px;
}
.graphic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
}

.config-container {
  width: 350px;
}
</style>
